<template>
  <div>
    <Row>
        <Col span="12">
          <div id="myCharts1" ref="myCharts1"></div>
        </Col>
        <Col span="12">
          <div id="myCharts2" ref="myCharts2"></div>
        </Col>
    </Row>
  </div>
</template>
<script>
import { getDivisionContractSum } from '@/api/contract';
export default {
  name: 'income-chart',
  data() {
    return {
      contractSum: [],
      options1: {
        title: {
          text: '项目部合同金额统计',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            data: [],
          }
        ],
        yAxis: [
          {
            type : 'value',
            axisLabel : {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name:"金额(万元)",
            type: "bar",  //pie->饼状图  line->折线图  bar->柱状图
            data:[], 
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.6)'
            }
          },
        ]
      },
      options2: {
        title: {
          text: '项目部合同数量统计',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            data: [],
          }
        ],
        yAxis: [
          {
            type : 'value',
            axisLabel : {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name:"数量(个)",
            type: "bar",  //pie->饼状图  line->折线图  bar->柱状图
            data:[], 
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.6)'
            }
          },
        ]
      },

    }
  },
  methods: {
    getDivisionContract() {
      const myCharts1 = this.$echarts.init(this.$refs.myCharts1);
      const myCharts2 = this.$echarts.init(this.$refs.myCharts2);
      getDivisionContractSum().then(res => {
        if (res.code === 0) {
          this.contractSum = res.data;
          this.contractSum.forEach(item => {
            this.options1.xAxis[0].data.push(item.organization_name);
            this.options1.series[0].data.push(item.contract_cost);
            this.options2.xAxis[0].data.push(item.organization_name);
            this.options2.series[0].data.push(item.count);
          })
          myCharts1.setOption(this.options1);
          myCharts2.setOption(this.options2);
        }
      })
    }
  },
  mounted() {
    this.getDivisionContract();
  }
}
</script>
<style lang="less" scoped>
#myCharts1, #myCharts2 {
  height: 180px;
  width: 100%;
}
</style>